<template>
  <div class="Home">
    <el-container class="container">
      <!-- 头部 -->
      <el-header>
        <img src="../assets/logo2.jpg" alt="" class="head_img" />
        <div class="head_btn">  
          <el-button type="primary">消息</el-button>
          <el-button type="primary">设置</el-button>
          <el-button type="primary" @click="logout()">安全退出▼</el-button>
        </div>
      </el-header>
      <el-container>
        <!-- 左部 -->
        <el-aside width="220px">
          <p class="username">当前用户：{{username}}</p>
          <el-menu router unique-opened :default-active="activeItem" @select="select" class="el-menu-vertical-demo" >
            <!-- 一级菜单 -->
            <el-submenu :index="v.id+' '" v-for="(v,index) in menusList" :key="v.id">
              <template slot="title">
                <i :class="icons[index]"></i>
                <span class="icontitle">{{v.authName}}</span>
              </template>
              <!-- 二级菜单 -->
                <el-menu-item :index="item.path" v-for="item in v.children" :key="item.id">{{item.authName}}</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        
        <!-- 路由视图 -->
        <router-view></router-view>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue

export default {
  name: "Home",
  data() {
    return {
      username:"",
      menusList:[],
      activeItem:"users",
      icons:[
        "iconfont icon-huaban5",
        "iconfont icon-quanxian",
        "iconfont icon-shangpinguanli",
        "iconfont icon-logooo_huabanfuben",
        "iconfont icon-shuju",
      ]
    };
  },
  methods: {
    // 保存选中状态
    select(a){
      sessionStorage.setItem("activeItem",a);
    },
    // 退出登录
    logout(){
      sessionStorage.removeItem("token");
      // 发请求，把服务器端的token删除
      // this.axios.post("/logout")

      this.$router.push("/login")
    },
    // 获取导航菜单
    async getMenus(){
      var p1 =   await this.axios.get("menus");
        // console.log(p1.data.data);
      this.menusList = p1.data.data;
    }
  },
  mounted() {
    this.username = sessionStorage.getItem("uname")
    this.getMenus();
    // 重新获取状态值
    this.activeItem = sessionStorage.getItem("activeItem") || "user";
  },
};
</script>
<style lang="scss">
// *{margin: 0;padding: 0;}
.el-header {
  background-color: #0097da;
  color: #333;
  text-align: center;
  line-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  button {
    width: 100px;
  }
  
}
.icontitle{
    margin-left:5px;
  }
.el-aside {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 306px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.username{
  width: 200px;
  text-align: center;
  margin: 20px 2px;
}
</style>
